import { useNavigate } from "react-router-dom";
import { Form, Input, Button, Message, Card } from "@arco-design/web-react";
import { postRequest } from "@/request";
import SessionStorageService from "@/SessionStorageService";

const FormItem = Form.Item;

export default function Register() {
  const navigate = useNavigate();

  const [form] = Form.useForm();

  // 提交表单
  const handSubmit = () => {
    // 验证表单
    form.validate().then(async (values) => {
      // 如果两次密码不一致，则提示错误信息
      if (values.password !== values.password2) {
        Message.error("两次密码不一致,请修改");
        return;
      }
      console.log("values==", values);
      // 示例POST请求
      postRequest("/admin/auth/register", { ...values }).then((data) => {
        console.log("POST响应数据:", data);
        // 如果返回的数据中包含token，则表示注册成功
        if (data && data?.token) {
          Message.success(`注册成功`);
          // 跳转到pptList页面
          window.location.href = "/pptList";
          // 将token保存到SessionStorage中
          SessionStorageService.setItem("token", data?.token);
          // 提示登录成功
          Message.success(`登录成功`, values);
        } else {
          // 如果返回的数据中不包含token，则表示Email地址已经被注册
          Message.error(`Email address already registered`);
        }
      });
    });
  };

  return (
    <div
      style={{
        width: "100vw",
        height: "100vh",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Card style={{ width: 660 }} title="用户注册">
        {/* 表单 */}
        <Form form={form} autoComplete="off" style={{ width: 600 }}>
          {/* 邮箱表单项 */}
          <Form.Item
            label="邮箱"
            field="email"
            rules={[
              {
                type: "email",
                validateLevel: "warning",
              },
              {
                required: true,
                message: "请输入邮箱",
              },
            ]}
          >
            <Input placeholder="" />
          </Form.Item>
          {/* 用户名表单项 */}
          <FormItem
            label="用户名"
            field="username"
            rules={[
              {
                required: true,
                message: "请输入用户名",
              },
            ]}
          >
            <Input placeholder="" />
          </FormItem>
          {/* 密码表单项 */}
          <FormItem
            label="密码"
            field="password"
            rules={[
              {
                required: true,
                message: "请输入密码",
              },
            ]}
          >
            <Input.Password placeholder="" />
          </FormItem>
          {/* 确认密码表单项 */}
          <FormItem
            label="确认密码"
            field="password2"
            rules={[
              {
                required: true,
                message: "请输入密码",
              },
            ]}
          >
            <Input.Password placeholder="" />
          </FormItem>
          {/* 提交按钮 */}
          <FormItem wrapperCol={{ offset: 5 }}>
            <Button
              type="primary"
              onClick={handSubmit}
              style={{ marginRight: 24 }}
            >
              注册
            </Button>
            {/* 去登录按钮 */}
            <Button
              type="text"
              style={{ marginRight: 24 }}
              onClick={() => {
                navigate("/login");
              }}
            >
              去登录
            </Button>
          </FormItem>
        </Form>
      </Card>
    </div>
  );
}
